<template>
  <CommonPage>
    <AppCrud
      ref="tableRef"
      :columns="columns"
      default-sort="createdAt"
      v-model:query="query"
      :get-data="employApi.page"
    >
      <query-item label="帐号">
        <el-input
          size="small"
          placeholder="请输入帐号"
          v-model="query.username"
          allow-clear
        ></el-input>
      </query-item>

      <template #action>
        <el-button type="primary" @click="handleAdd">
          <template #icon
            ><el-icon><Plus></Plus></el-icon
          ></template>
          创建用户
        </el-button>
      </template>
    </AppCrud>

    <AppModal ref="modalRef" width="800px">
      <el-form ref="formRef" :model="formModel" label-width="auto">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item
              label="帐号"
              name="username"
              :rules="[{ required: true, message: '此为必填项' }]"
            >
              <el-input
                placeholder="请输入帐号"
                v-model="formModel.username"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              v-if="modalAction == 'add'"
              label="密码"
              name="password"
              :rules="[{ required: true, message: '此为必填项' }]"
            >
              <el-input
                placeholder="请输入密码"
                v-model="formModel.password"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱">
              <el-input
                placeholder="请输入邮箱"
                v-model="formModel.email"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话">
              <el-input
                placeholder="请输入联系电话"
                v-model="formModel.mobile"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="角色">
              <el-radio-group v-model="formModel.roleId">
                <el-radio v-for="role in roles" :value="role.id">{{
                  role.title
                }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="备注">
              <el-input
                type="textarea"
                placeholder="请输入备注信息"
                v-model="formModel.remark"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </AppModal>
  </CommonPage>
</template>
<script setup lang="ts">
import { AppCrud, AppModal, CommonPage, QueryItem } from "@/components/common";
import { useCrud } from "@/hooks/useCrud.ts";
import employApi, { EmployeeDto } from "@/api/employee";
import { Plus } from "@element-plus/icons-vue";
import { ElSpace, ElTag, ElButton } from "element-plus";

defineOptions({
  name: "User",
});

const tableRef = ref();

const query = ref({
  name: null,
});

const columns = [
  {
    title: "工号",
    align: "center",
    dataIndex: "idNumber",
    width: 120,
  },
  {
    title: "姓名",
    dataIndex: "name",
    align: "center",
    width: 150,
  },
  {
    title: "邮箱",
    dataIndex: "email",
  },
  {
    title: "角色",
    align: "center",
    width: 100,
    dataIndex: "admin",
    render: ({ row }: any) => {
      return h("div", row.role.title);
    },
  },
  {
    title: "状态",
    dataIndex: "disabled",
    width: 100,
    align: "center",
    render: ({ row }: any) => {
      return h(
        ElTag,
        {
          size: "small",
          effect: "dark",
          type: row.disabled ? "error" : "success",
        },
        {
          default: () => (row.disabled ? "禁用" : "启用"),
        },
      );
    },
  },
  {
    title: "创建时间",
    width: 200,
    dataIndex: "createdAt",
  },
  {
    title: "操作",
    align: "center",
    width: 150,
    render: ({ row }: any) => {
      return h(
        ElSpace,
        {},
        {
          default: () => [
            h(
              ElButton,
              {
                size: "small",
                type: "primary",
                onClick: () => {
                  handleEdit(row);
                },
              },
              {
                default: () => "编辑",
              },
            ),
            h(
              ElButton,
              {
                size: "small",
                type: "danger",
                onClick: () => handleDelete(row.id),
              },
              {
                default: () => "删除",
              },
            ),
          ],
        },
      );
    },
  },
];

const {
  modalRef,
  formRef,
  formModel,
  modalAction,
  handleEdit,
  handleAdd,
  handleDelete,
} = useCrud<EmployeeDto>({
  name: "员工",
  initForm: {
    name: "",
    employeeCode: "",
    phone: null,
    idNumber: null,
    email: null,
    status: "active",
  },
  doCreate: employApi.create,
  doUpdate: employApi.update,
  doDelete: employApi.delete,
  doGet: employApi.get,
  refresh: () => tableRef.value?.handleSearch(),
});

onMounted(() => {
  tableRef.value?.handleSearch();
});
</script>

<style scoped></style>
